<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>响应式模板</title>
<meta content="" name="Keywords">
<meta content="" name="Description">
<meta name="format-detection" content="telephone=no">
<link href="/static/css/ui.css" rel="stylesheet">
<link href="/static/css/grid.css" rel="stylesheet">
<link href="/web/css/style.css" rel="stylesheet">
</head>
<body>

<div style="font-size:18px">双向绑定</div>

<br><br><br>


<div id="app" style="margin:20px;">
    <div>
        <div style="font-size:18px;">input</div>

        <input v-model="my_input" placeholder="edit me">
        <p>Message is: {{ my_input }}</p>

        <br><br><br><br>
    </div>

    <div>
        <div style="font-size:18px;">input</div>

        <span>Multiline message is:</span>
        <p style="white-space: pre-line;">{{ my_textarea }}</p>
        <br>
        <textarea v-model="my_textarea" placeholder="add multiple lines"></textarea>

        <br><br><br><br>
    </div>

    <div>
        <div style="font-size:18px;">checkbox</div>
        <input type="checkbox" id="checkbox" v-model="my_checked" v-bind:true-value="a" v-bind:false-value="b">
        <label for="checkbox">{{ my_checked }}</label>

        <br><br><br><br>
    </div>

    <div>
        <div style="font-size:18px;">多个checkbox</div>
        <input type="checkbox" id="jack" value="Jack" v-model="my_checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="my_checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="my_checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ my_checkedNames }}</span>

        <br><br><br><br>
    </div>

    <div>
        <div style="font-size:18px;">radio</div>
        <input type="radio" id="one" value="One" v-model="my_radio">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="my_radio">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ my_radio }}</span>

        <br><br><br><br>
    </div>


    <div>
        <div style="font-size:18px;">select</div>
        <select v-model="my_select">
            <option disabled value="">请选择</option>
            <option value="1131">A</option>
            <option value="1121">B</option>
            <option value="112f1">C</option>
        </select>
        <span>Selected: {{ my_select }}</span>

        <br><br><br><br>
    </div>

</div>



<div id="app1" style="margin:20px;">
    课程名称：<input type="text" name="kcmc" class="input-sm" maxlength="50" v-model="map.kcmc"><br><br>

    课程分类：
    <select name="yxid" class="input-sm" v-model="map.yxid">
        <option value="">请选择</option>
        <optgroup v-for="item in cates" v-if="item.children.length != '0'" v-bind:label="item.xsm">
            <option v-for="value in item.children" v-bind:value="value.yxid" v-bind:name="value.xsm">{{value.xsm}}</option>
        </optgroup>
    </select>
    
    <br><br>

    <button type="submit" @click="submitDate">提交</button>
    
    <br><br>
    课程名称：{{map.kcmc}}<br>
    课程分类：{{map.yxid}}

    <br><br><br><br><br><br>
</div>


<script src="/static/modules/seajs/sea.js" id="seajsnode" ></script>
<script src="/web/seajs.config.js"></script>
<script>seajs.use('js/test2');</script>
</body>
</html>